<template>
  <svg
      :class="getClassName"
      :width="width"
      :height="height"
      aria-hidden="true">
    <use :xlink:href="getName"></use>
  </svg>
</template>
<script setup lang="ts">
import {defineProps,computed} from "vue";
  const props = defineProps({
    name: {
      type: String,
      required: true
    },
    className: {
      type: String
    },
    width: {
      type: String,
      default:'1em'
    },
    height: {
      type: String,
      default:'1em'
    }
  })
  const getName = computed(()=>`#icon-${props.name}`);
  const getClassName = computed(()=>[
    'icon-svg',
    `icon-svg__${props.name}`,
    props.className && /\S/.test(props.className) ? `${props.className}` : ''
  ])

</script>
<style scoped lang="scss">
.icon-svg {
  vertical-align: -0.15em;
  fill: #fff;
  overflow: hidden;
}
/*.icon-svg circle {
  fill:#fff;
}*/
</style>
